<template>
<view class="contents">
			<view class="tit">
				二等奖
			</view>
			<view class="jpmc">
				<view>恭喜获得
					<text class="red">有机小米</text>
				</view>
				<view class=" txt1">（价值<text class="red">19.9元</text>）</view>
			</view>
			<view class="guanghuan">
				<image class="bg" src="../static/you-magic/images/jbg.png" mode=""></image>
				<view class="main">
					<image class="pic" src="../static/you-magic/images/j22.png" mode=""></image>
					<image @click="get" class="btns3" src="../static/you-magic/images/get.png" mode=""></image>
				</view>
			</view>
			<view class="addkefu">
				【复制串码添加企微兑换】
			</view>
			<view class="macode">
				<view class="">
					<!-- 842494739320 -->
					{{copyCode}}
				</view>
				<view @click="copy(copyCode)" class="btn">
					直接领取
				</view>
			</view>
			<view class="ewmCont">
				<image class="img" src="../static/you-magic/images/xmewm.png" mode=""></image>
				<!-- <image class="img" src="../static/common/img/qywx.jpg" mode=""></image> -->
			</view>
			<view class="tips">
				*请先复制兑奖码，点击立即兑换填写信息*
			</view>
			
		</view>
</template>

<script>
	export default{
		props:['copyCode','id'],
		methods:{
			get(){
				uni.setClipboardData({
					data: this.copyCode, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '成功复制兑换码，长按识别二维码添加企业微信客服领取！',
							icon: "none"
						})
					}
				});
			},
			copy(copyCode){
				
				uni.setClipboardData({
					data: copyCode, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功',
							icon: "none"
						})
					}
				});
				
				this.$u.api
					.copyBtnClick({
						openid: this.vuex_token1,
						id:this.id
					})
					.then((res1) => {
						
					});
				
				
			}
		}
	}
</script>
<style>
	

	.pagetwo {
		position: relative;
		width: 100%;
		/* max-width: 375PX !important; */
		margin: 0 auto;
	}

	.cow {

		width: 121rpx;
		height: 156rpx;
		background: url('../static/you-magic/images/q2.png') no-repeat;
		/* 小牛图片 */
		background-size: cover;
		border-radius: 50%;
		position: absolute;
		left: 12rpx;
		top: 594rpx;
		animation: moveDownAndGrow 0.6s cubic-bezier(0.42, 0, 0.58, 1) forwards;

		/* animation: breathing 1s ease-in-out infinite; */
	}


	@keyframes moveDownAndGrow {
		0% {
			transform: translate(0, 0) scale(1);
		}

		30% {
			transform: translate(50px, 100px) scale(1.1);
			/* 弯曲效果，开始向右下移动 */
		}

		50% {
			transform: translate(60px, 110px) scale(1.2);
			/* 最大的弯曲和变大 */
		}

		70% {
			transform: translate(70px, 120px) scale(1.3);
			/* 继续移动 */
		}

		100% {
			transform: translate(115px, 125px) scale(1.5);
			/* 最终位置和最大大小 */
		}
	}

	@keyframes moveDownAndGrow {
		0% {
			/* transform: translate(0, 0) scale(1); */
			
			transform: scale(1);
			left: 0;
			top: 594rpx;
			
		}

		/* 30% {
	         transform: translate(50px, 100px) scale(1.1); 
	       }
	       50% {
	         transform: translate(60px, 110px) scale(1.2); 
	       }
	       70% {
	         transform: translate(70px, 120px) scale(1.3); 
	       } */
		100% {
			transform:  scale(1.5);
			left: 145px;
			top: 960rpx;
			/* transform: translate(145px, 195px) scale(1.5); */
		}
	}
	
	
	@media screen and (min-width:100px) and (max-width:376px) {
	   @keyframes moveDownAndGrow {
	   	0% {
	   	
	   		transform: scale(1);
	   		left: 0;
	   		top: 594rpx;
	   	}
	   	100% {
	   		transform:  scale(1.5);
	   		left: 145px;
	   		top: 960rpx;
	   	}
	   }
	}
	/* @media screen and (min-width:376px) and (max-width:413px) {
	   @keyframes moveDownAndGrow {
	   	0% {
	   	
	   		transform: scale(1);
	   		left: 0;
	   		top: 594rpx;
	   	}
	   	100% {
	   		transform:  scale(1.5);
	   		left: 145px;
	   		top: 870rpx;
	   	}
	   }
	} */
	


	.bull {
		width: 121rpx;
		height: 156rpx;
		background: url('../static/you-magic/images/q2.png') no-repeat;
		/* 小牛图片 */
		background-size: cover;
		animation: slideDownAndGrow 2s forwards;
		animation-iteration-count: 1;
		left: 12rpx;
		top: 594rpx;
		position: absolute;
	}

	@keyframes slideDownAndGrow {
		0% {
			transform: translateY(0px);
			/* 下降20像素 */
			/*  width: 121rpx;
	   height: 156rpx; */
		}

		100% {
			transform: translateY(50px) scale(1.5, 1.5);
			/* 变大20% */
			/*  width: 121rpx;
	   height: 156rpx; */
		}
	}

	@keyframes breathe {
		0% {
			opacity: 0.5;
			transform: scale(1);
		}

		50% {
			opacity: 1;
			transform: scale(1.2);
		}

		100% {
			opacity: 0.5;
			transform: scale(1);
		}
	}



	.Mybgs {
		/* width: 100%; */
		/* height: 100vh; */
		/* background: url('../static/you-magic/images/1.png') no-repeat;
		background-size: cover; */
		width: 100%;
		height: 100vh;
		/* height: 100vh; */
		display: block;

	}

	/* 	page {
		overflow: hidden;
		width: 100%;
		height: 100vh;
		background: url('../static/you-magic/images/1.png') no-repeat;
		background-size: 100% 100%;
	} */
</style>
<style  lang="scss">
	.mypageone{
		position: relative;
		.close1 {
			display: block;
			
			width: 56rpx;
			height: 56rpx;
			
			margin: 20rpx 0 20rpx auto;
		}
		.beisao{
			width: 622rpx;
			height: 546rpx;
		}
	}
	
	
	.logos{
		position: absolute;
		top: 50px;
		left: 0;
		right: 0;
		
		width: 100%;
		img{
			width: 100%;
			display: block;
			margin: 0 auto;
		}
	}
	.pagetwo {
		position: relative;
	}

	.contents {
		position: absolute;
		top: 187rpx;
		left: 72rpx;
		z-index: 88;
		right: 54rpx;
		bottom: 0;

		.tit {
			font-family: OPPOSans;
			font-weight: normal;
			font-size: 29rpx;
			color: #FEEFD2;
			// line-height: 38rpx;
			margin-top: 10rpx;
			text-align: center;
		}
		.kefu{
			font-family: Source Han Sans CN;
			font-weight: bold;
			font-size: 30rpx;
			color: #FEF8C4;
			line-height: 33rpx;
			text-align: center;
			position: absolute;
			bottom: 48rpx;
			width: 100%;
		}

		.jpmc {
			position: relative;
			z-index: 3;
			margin: 43rpx 0 35rpx;
			font-family: OPPOSans;
			font-weight: normal;
			font-size: 42rpx;
			color: #3D211F;
			line-height: 61rpx;
			text-align: center;

			.txt1 {
				font-size: 30rpx;
			}

			.red {
				color: #CC1D00;
			}
		}

		@keyframes rotate {
			from {
				transform: rotate(0deg);
			}

			to {
				transform: rotate(360deg);
			}
		}
		

		.guanghuan {
			position: relative;
			width: 483rpx;
			height: 459rpx;
			margin: 0 auto;
			margin-top: -60px;

			.bg {
				animation: rotate 3s linear infinite;
				position: relative;
				
				z-index: 1;
				width: 100%;
				height: 100%;
			}

			.main {
				
				
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				z-index: 5;
				>.pic{
					display: block;
					margin: 100rpx auto 30rpx;
					width: 293rpx;
					height: 285rpx;
				}
			}
			.btns3{
				width: 275rpx;
				height: 63rpx;
				margin: 0 auto;
				display: block;
				animation: breathing 0.5s ease-in-out infinite;
				
			}
			
		}
	}

	/deep/ .u-checkbox__icon-wrap {
		border: 1rpx solid #fff !important;
	}

	.read {
		position: absolute;
		bottom: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		left: 0;
		right: 0;

		text {
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 20rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}

	.swiper {
		// position: absolute;
		// left: 0;
		// right: 0;
		// top: 455rpx;
		// top: 480rpx;

		/deep/ .u-swiper-item {
			justify-content: center !important;
		}

		.sweiperitem {
			font-family: OPPOSans;
			font-weight: normal;
			font-size: 24rpx;
			transform: scale(0.7);
			color: #FAEBCC;
			text-align: center;
		}

		.line {
			// position: absolute;
			width: 502rpx;
			height: 25rpx;
			margin: 0 0 0 128rpx;
			// left: 128rpx;
			// top: 491rpx;
		}
	}


	.run {

		.niu {

			position: absolute;
			left: 12rpx;
			top: 594rpx;
			width: 121rpx;
			height: 156rpx;


		}

		.handle {
			right: 34rpx;
			top: 534rpx;
			position: absolute;
			width: 251rpx;
			height: 251rpx;
			animation: breathing 1s ease-in-out infinite;
			border-radius: 50%;
			// box-shadow: 0 0 0 0 rgba(249, 237, 163, 1.0);

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.hand {
		width: 20px;
		display: block;
		height: auto;
		margin-left: 10px;
	}

	.step {
		border-radius: 50%;
		width: 24rpx;
		height: 24rpx;
		background: #FDE396;
		font-family: FZLTZCHK--GBK1, FZLTZCHK--GBK1;
		font-weight: normal;
		font-size: 16rpx;
		color: #C9332C;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.step1 {
		position: absolute;
		right: -20px;
		top: -10px;
	}

	.add /deep/ .u-mode-center-box {
		background: url('../static/you-magic/images/tankuangbg1.png') no-repeat;
		background-size: cover;
		width: 622rpx;
		height: 1135rpx;
	}
	.add1  /deep/ .u-mode-center-box{
		background: none ;
		height: 100rpx;
	}
 
	.rulesMask {
		margin: 0 30rpx;

		.words {
			line-height: 25px;
			font-size: 26rpx;
		}
	}

	.tits {
		padding: 250px 0 10px;
		text-align: center;
		font-size: 17px;
	}

	.bgs {
		position: relative;

		.dhm {
			position: absolute;
			bottom: 50rpx;
			left: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: FZLTZHK--GBK1, FZLTZHK--GBK1;
			font-weight: normal;
			font-size: 24rpx;
			color: #FDDF8C;
			// line-height: 27rpx;
			// margin: 20px 0;
		}




		.ydj {
			
			img {
				display: block;
				width: 100%;
				height: auto;
				margin: 50px auto;
			}
		}
	
		.edj{
			img {
				display: block;
				width: 100%;
				height: auto;
				margin: 10px auto;
			}
			.pic{
				width: 156rpx !important;
				height: 290rpx !important;
			}
			.addkefu{
				text-align: center;
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 30rpx;
				color: #FEF8C4;
				line-height: 33rpx;
				margin: 95rpx auto 29rpx;
			}
			.macode{
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 30rpx;
				color: #FEF8C4;
				line-height: 33rpx;
				.btn{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 174rpx;
					height: 40rpx;
					background: linear-gradient(-68deg, #FBE1B1, #F2C96A, #E7CA8F, #FFF1D4, #F5D486, #FFEFCE);
					border-radius: 20rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 27rpx;
					color: #D2381C;
					margin-left: 15rpx;
				}
			}
			.tips{
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 23rpx;
				color: #FEF8C4;
				line-height: 33rpx;
				margin-top: 24rpx;
				text-align: center;
			}
			.ewmCont{
				width: 201rpx;
				height: 201rpx;
				background: #FCE295;
				border-radius: 10rpx;
				margin: 21rpx auto;
				display: flex;
				align-items: center;
				justify-content: center;
				.img{
					width: 183rpx;
					height: 183rpx;
					border-radius: 10rpx;
				}
			}
		}
		
		.sdj{
			.pic{
				
				width:296rpx !important;
				height: 290rpx !important;
				animation: breathing 0.5s ease-in-out infinite;
			}
			.btns3{
				animation: breathing 0s ease-in-out infinite !important;
			}
		}



		.close {
			position: absolute;
			width: 46rpx;
			height: 46rpx;
			right: 77rpx;
			top: 30rpx;
			z-index: 8;
		}




	}


	/deep/ .u-checkbox__label {
		margin-right: 0;
		margin-left: 13rpx;
		font-family: FZLTZHK--GBK1, FZLTZHK--GBK1;
		font-weight: normal;
		font-size: 20rpx;
		color: #FEDB84;
		line-height: 52rpx;
		text-align: center;
		font-style: normal;
	}

	


	


	@keyframes breathing {
		0% {
			box-shadow: 0 0 0 0 rgba(248, 244, 122, 0.7);
			transform: scale(1);
		}

		50% {
			// box-shadow: 0 0 10px 10px rgba(248, 244, 122, 0);
			transform: scale(1.1);
		}

		100% {
			box-shadow: 0 0 0 0 rgba(248, 244, 122, 0.7);
			transform: scale(1);
		}
	}
	.handleBox{
		position: absolute;
		right: 0;
		top: 77rpx;
		z-index: 8;
		.sameBox{
			text-align: center;
			margin-bottom: 10rpx;
			width: 43rpx;
			height: 131rpx;
			background: rgba(26,172,143,0.47);
			border-radius: 18rpx 0 0 18rpx;
			border: 2rpx solid #1AAC8F;
			font-family: OPPOSans;
			font-weight: normal;
			font-size: 23rpx;
			color: #24D8B5;
		}
	}


</style>


